<script setup lang="ts">
const zoom = ref<'zoomIn' | 'zoomOut'>('zoomIn')
const handleFullScreen = () => {
  let full = document.fullscreenElement
  if (!full) {
    document.documentElement.requestFullscreen()
    zoom.value = 'zoomOut'
  } else {
    document.exitFullscreen()
    zoom.value = 'zoomIn'
  }
}
</script>

<template>
  <el-button circle @click="handleFullScreen">
    <zc-svg-icon :name="zoom === 'zoomOut' ? 'zoom-out' : 'zoom-in'" />
  </el-button>
</template>
